<template>
	<view>
		<view class="walletItem flex align-center justify-between" @click="toadd">
			<text style="margin-left: 10upx;font-size: 32upx;">+新增银行卡</text>
			<image class="rightLogo" src="/static/image/icon/arrow-right.png"></image>
		</view>
		<view class="walletItem" v-if="list.length>0">
			<view class="bankItem flex flex-direction justify-around" v-for="(i,index) in list" @click="toEdit(i)">
				<view class="bankname">{{i.bank_name}}{{i.bank_branch}}</view>
				<text style="font-size: 26upx;">储蓄卡</text>
				<view class="bankBum">XXXX XXXX XXXX {{i.bank_num | keepFour}}</view>
				<image class="closeImg" src="/static/image/icon/dialog-close.png" @click.stop="deleteCard(i,index)"></image>
			</view>
		</view>
	</view> 
</template>

<script>
	import {
		post,
		get
	} from "@/utils/post.js";
	export default {
		data() {
			return {
				list:''
			}
		},
		onShow(){
			this.getList()
		},
		filters:{
			keepFour(num){
				console.log(num)
				return num.substring(num.length-4)
			}
		},
		methods: {
			getList(){
				this.$sloading()
				this.$request({
					url: this.$api.wallet.bank_list,
					method:'post',
					data: {
						type:1
					}
				}).then(info => {
					this.$hloading()
					if (info.code == 0) {
						this.list = info.data.list
					}
				}).catch(info => {
					this.$hloading()
				})
			},
			deleteCard(i,index){
				this.$showM('是否删除该银行卡？',true,res=>{
					if(res){
						this.$sloading()
						this.$request({
							url: this.$api.wallet.delete_bank,
							method:'post',
							data: {
								id:i.id
							}
						}).then(info => {
							this.$hloading()
							if (info.code == 0) {
								this.list.splice(index,1)
							}
						}).catch(info => {
							this.$hloading()
						})
					}
				})
			},
			toadd(){
				uni.navigateTo({
					url:'/pages/WB/bindBank'
				})
			},
			toEdit(i){
				uni.navigateTo({
					url:'/pages/WB/bindBank?id='+i.id
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.closeImg{
		position: absolute;
		top:20upx;
		right: 20upx;
		width: 36upx;
		height: 36upx;
	}
	.bankname{
		font-size: 30upx;
	}
	.bankItem{
		width: 100%;
		height: 200upx;
		background-image: url('../../static/image/index/wbg.png');
		background-size: 100% 100%;
		border-radius: 10upx;
		overflow: hidden;
		padding: 20upx;
		color: #fff;  
		position: relative;
		margin-bottom: 20upx;
	}
	.walletItem{
		width: 700upx;
		padding: 20upx;
		border-radius: 10upx;
		box-shadow: 0 0 5px #93cdfe;
		background: #fff;
		margin: 40upx auto 0;
	}
	.rightLogo{
		width: 18upx;
		height:36upx;
	}
</style>
